<template>
  <el-container>
    <el-header height="90px">
      <div class="leftLogo">
  <img width="170px" height="80px" 
src="../assets/images/index/logo.png">
  </div>
      <div>
        <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo textClass"
  mode="horizontal"
  @select="handleSelect"
  background-color="#fe8c00"
  text-color="#7F7F7F"
  active-text-color="#fff"
>
        <el-menu-item :index="item.id" v-for="item in menu" v-bind:key="item.id">{{item.name}}
          <div :class="item.id === tempActive?'inlineClass':''"></div>
        </el-menu-item>
        
      </el-menu>

      </div>
  <div>
    <el-row class="demo-avatar demo-basic" >
    <el-col :span="12">
      <div class="demo-basic--circle">
        <div class="block">
          <el-avatar :size="55" :src="circleUrl"></el-avatar>
        </div>
      </div>
      <div class="sub-title" @click="Login">{{username}}</div>
    </el-col>
  </el-row>           
  </div>

  
    </el-header>
    <el-main>
    <router-view></router-view>
    </el-main>
    <el-footer>
      <div class="fonterClass">
      <div class="bigText">
        <span v-for="item in footerBigText" v-bind:key="item.id">{{item.name}}</span>
      </div>
      <div class="samllText">
        <span v-for="item in footerSmallText" v-bind:key="item.id">{{item.after}}:{{item.before}}</span>
      </div>
    </div>

    </el-footer>
  </el-container>
  
</template>

<script>

export default {
  
  data() {
    return { 
      activeIndex2: "0" ,
      tempActive:'0',
      isRoot:0,
      isLogin:0,
      isDisable:false,
      circleUrl:"../assets/images/index/touxiang.png",
      username : '未登录',
      menu:[
        { id:'0', title:'index', name:'首页',},
        { id:'1', title:'science', name:'非遗科普', },
        { id:'2', title:'shopping', name:'非遗商城', },
        { id:'3', title:'class', name:'非遗课堂', },
        { id:'4', title:'activity', name:'非遗活动', },
        { id:'5', title:'cooperation', name:'合作共赢', }, 
      ],
      
      footerBigText:[
      { id:0, name:'首页',}, 
      { id:2, name:'|',},
      { id:3, name:'非遗科普', }, 
      { id:4, name:'|',},
      { id:5,  name:'非遗商城', }, 
      { id:6, name:'|',},
      { id:7,name:'非遗课堂', }, 
      { id:8,  name:'非遗活动',}, 
      { id:9, name:'|',},
      { id:10,  name:'合作共赢', },
      ],
      footerSmallText:[
        { id:0, after:'技术支持',before:'xxxxx有限技术公司'},
        { id:1, after:'维护支持',before:'xxxxx有限技术公司'},
        { id:2, after:'联系电话',before:'123456789'},
        { id:3, after:'邮箱',before:'12123444@123.com'},
        { id:4, after:'地址',before:'湖南省衡阳市珠晖区56路xxxx'}

      ]
    };
  },
  mounted () { 
    this.isRoot = window.sessionStorage.getItem('rootId');
    this.isLogin = window.sessionStorage.getItem('isLogin');
    this.circleUrl = 'https://d1icd6shlvmxi6.cloudfront.net/gsc/3L3DTF/fc/16/aa/fc16aaf1b1f444dcbc80d258417730c6/images/首页/u113.png?token=78510b465e71e8162076efa8cd375bf98364943ba24a485f07a1e67b1d025781'
    this.username = '初七'
    this.isDisable = true
    console.log(this.isRoot);
  },

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.isRoot = key;
      this.tempActive = key;
      let root = '/'+this.menu[key].title
      this.$router.push(root)
    },
    Login(){
      console.log("llll");
      this.isRoot = 6;
      this.$router.push('/login')
    }
  },
  
};
</script>

<style lang="less" scoped>
.el-header{
  display: flex; 
  flex-direction: row;
  background-color:#fe8c00 ;
  justify-content: space-between;
  padding: 0;
  .el-menu{
    border-bottom: none !important;
    .inlineClass{
      padding: 0;
      line-height: 0;
      position: relative;
      bottom: 20px;
      border-bottom: 4px solid red;
    }
  } 
  .el-menu-item{ 
    font-size: 25px; 
    text-align:center; 
    font-weight: 600; 
    display: flex;
    flex-direction: column;
   
  } 
  .el-menu--horizontal>.el-menu-item { 
  height: 90px;
  margin: 0 20px; 
  line-height: 90px; 
  border-bottom: none !important; 
  }
  .el-row{
    width: 150px;
    text-align: center;
    .sub-title{
      height: 20px;
      text-align: center;
      color: #fff;
      font-size: 20px;
    }
  }
  .leftLogo{
    width:200px;
    margin-left: 150px;
    position: relative;
    left: 0%;
    background-color:#fe8c00 ;
  }
}
.el-main{
  padding: 0;
  width: 100%;
   
}
  .el-footer{
    width: 100%;
    padding: 0;
    .fonterClass{
      height: 130px; 
      width: 100%; 
      padding: 20px 0;
      background-color:#fe8c00; 
      .bigText{ 
        margin: 0 25%; 
        font-size: 30px; 
        span{
          margin: 20px 5px; 
          color: #fff; 
          font-weight: 600; 
          } 
        } 
        .samllText{ 
          margin: 0 220px; 
          margin-top: 70px;
          font-size: 20px; 
          span{ margin-right: 30px; } 
        }
     }

  }

</style>
